<template>
	<view
		style="color: #333333;align-items: center;display: flex;flex-direction: column;min-height:  100vh;font-size: 30rpx;">
		<view
			style="position: fixed;height: 200rpx;display: flex;flex-direction: column; background-color: #FFFFFF;width: 100%;">
			<view
				style="display: flex;flex-direction: row;width: 100%;height: 100rpx;align-items: center;  background-color: #FFFFFF;">
				<view style="margin-left: 20rpx;">工作地点：</view>
				<view style="display: flex;margin-left: 10rpx;">
					<uni-data-select v-model="requestParams.province" :localdata="provinceRange" style="width: 25vw;"
						@change="provinceChange"></uni-data-select>
				</view>
				<view style="display: flex;margin-left: 10rpx;">
					<uni-data-select v-model="requestParams.city" :localdata="cityRange" style="width: 40vw;"
						@change="cityChange"></uni-data-select>
				</view>
			</view>
			<view style="display: flex;flex-direction: row;width: 100%;height: 100rpx;align-items: center;">
				<view style="margin-left: 20rpx;">工作类型：</view>
				<view style="display: flex;margin-left: 10rpx;flex-direction: row; align-items: center;">
					<uni-data-select v-model="requestParams.career" :localdata="careerRange" style="width: 25vw;"
						@change="careerChange"></uni-data-select>
				</view>
				<button style="margin-left: 10rpx;height: 60rpx; background-color: #f54b4b; color: white;"
					type="primary" size="mini" @click="getDemandList(0)">搜索</button>
			</view>
		</view>


		<view style="margin-top: 200rpx;background: linear-gradient(#FFFFFF -1%,#ff3f3fa0 100%);">
			<view class="line-box" v-for="item in demandList" @click="toDemandDetail(item)">
				<view class="career-box">
					<image :src="typeMap[item.serveName]" style="width: 150rpx;height: 150rpx;"></image>
				</view>
				<view class="line-box1">
					<view class="line-box2">
						<view v-if="item.serveProvince" class="line-label1">{{item.serveProvince}}</view>
						<view v-if="item.serveCity" class="line-label1">{{item.serveCity}}</view>
						<view v-if="item.serveType" class="line-label1">{{item.serveType}}</view>
					</view>
					<view class="line-box2">
						<view class="line-label2">{{item.serveFee}}元/月</view>
					</view>
					<view class="demand-text">{{item.serveContent}}</view>
					<view class="demand-text">{{item.createTime}}</view>
				</view>
			</view>
		</view>

		<view v-if="noMore" style="padding: 50rpx;">没有更多数据了</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inviterCode: "",
				bindPhone: false,
				provinceRange: [{
					value: "浙江",
					text: "浙江"
				}],
				cityRange: [{
					value: '杭州',
					text: "杭州"
				}],
				careerRange: [{
					value: '保姆',
					text: "保姆"
				}, {
					value: '月嫂',
					text: "月嫂"
				}, {
					value: '育儿嫂',
					text: "育儿嫂"
				}, {
					value: '护工',
					text: "护工"
				}, {
					value: '烧饭阿姨',
					text: "烧饭阿姨"
				}, {
					value: '钟点工',
					text: "钟点工"
				}],
				demandList: [{
					"batchNo": "",
					"contact": "",
					"createTime": "",
					"creatorId": "0",
					"id": 1,
					"serveAddress": "",
					"serveCity": "",
					"serveContent": "",
					"serveFee": "",
					"serveName": "",
					"serveProvince": "",
					"serveRequire": "",
					"serveTime": "",
					"serveType": ""
				}],
				noMore: false,
				requestParams: {
					page: 0,
					size: 10,
					province: '',
					city: '',
					career: ''
				},
				areaMap: {},
				typeMap: {
					"保姆": "/static/type/baomu.jpg",
					"月嫂": "/static/type/yuesao.jpg",
					"育儿嫂": "/static/type/yuersao.jpg",
					"护工": "/static/type/hugong.jpg",
					"烧饭阿姨": "/static/type/shaofanayi.jpg",
					"钟点工": "/static/type/zhongdiangong.jpg"
				}
			}
		},
		onPullDownRefresh() {
			this.requestParams.page = 0;
			this.getDemandList();
		},
		onReachBottom() {
			if (this.noMore) return;
			this.getDemandList();
		},
		onLoad(options) {
			this.inviterCode = options.inviterCode || '';
			this.loadAreaMap();
			this.getDemandList();
			this.loadLogin();
		},
		onShareTimeline() {
			let shareParam = 'inviterCode=' + uni.getStorageSync("inviteCode");
			return {
				title: '好友邀请您一起找工作',
				query: shareParam, //分享页面查询参数
				imageUrl: 'https://file.dingdongjipai.com/sansao/file/cert/invite.png', // 自定义分享图片，可以是本地文件路径或者线上图片路径
				success(res) {
					// 分享成功的回调函数
					uni.showToast({
						title: '分享成功'
					});
				},
				fail(err) {
					// 分享失败的回调函数
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					});
				}
			};
		},
		methods: {
			provinceChange(e) {
				console.log(e)
				this.requestParams.province = e;
				this.cityRange = [];
				let citys = this.areaMap.cityMap[e];
				for (let key of citys) {
					this.cityRange.push({
						value: key,
						text: key
					});
				}
				console.log(this.cityRange)
			},
			cityChange(e) {
				this.requestParams.city = e;
			},
			careerChange(e) {
				this.requestParams.career = e;
			},
			getDemandList(page) {
				if (page === 0) {
					this.requestParams.page = 0;
					this.noMore = false;
				}
				this.$Request.postFormHost(this.$Api.getImportDemandList, this.requestParams)
					.then(
						res => {
							if (res.status == 0) {
								if (this.requestParams.page === 0)
									this.demandList = res.data;
								else
									this.demandList = this.demandList.concat(res.data);
								if (res.data.length < this.requestParams.size) {
									this.noMore = true;
								} else {
									this.requestParams.page++;
								}
							}
							uni.stopPullDownRefresh()
						}).catch(e => {
						uni.stopPullDownRefresh()
					});
			},
			toDemandDetail(item) {
				uni.navigateTo({
					url: '/pages/service/importDemandDetail?item=' + JSON.stringify(item)
				})
			},
			loadAreaMap() {
				this.$Request.postFormHost(this.$Api.getAreaMap)
					.then(
						res => {
							if (res.status == 0) {
								this.areaMap = res.data;
								this.provinceRange = [];
								for (let key of this.areaMap.province) {
									this.provinceRange.push({
										value: key,
										text: key
									})
								}
							}
						});
			},
			sendLoginRequest(code) {
				try {
					const requestData = {
						code: code,
						inviterCode: this.inviterCode
					};

					this.$Request.postFormHost(this.$Api.wxLogin, requestData)
						.then(
							res => {
								if (res.status == 0) {
									// 登录成功处理
									uni.setStorageSync('token', res.data.token);
									uni.setStorageSync("inviteCode", res.data.inviteCode)

								} else {
									uni.showToast({
										icon: "none",
										title: res.msg
									})
								}
							});
				} catch (error) {
					throw error;
				}
			},
			loadLogin() { //加载的时候获取openId
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes);
						that.sendLoginRequest(loginRes.code)
					}
				});
			}
		}
	}
</script>

<style>
	.line-box {
		display: flex;
		flex-direction: row;
		width: 96vw;
		height: 30vw;
		margin-top: 20rpx;
		border-radius: 15rpx;
		border: solid 2rpx #e0e6eb;
		background-color: rgba(255, 255, 255, 0.8);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
		overflow: hidden;
	}

	.career-box {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 8vw;
		font-weight: bold;
		color: white;
		padding: 10rpx;
	}

	.line-box1 {
		padding: 15rpx 10rpx;
		display: flex;
		flex-direction: column;
		align-items: left;
		width: 66vw;
	}

	.line-box2 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 10rpx;
	}

	.line-label1 {
		font-size: 28rpx;
		margin: 4rpx 8rpx 4rpx 0;
		background-color: #f5d6d6;
		color: #333333;
		border-radius: 6rpx;
		padding: 6rpx 12rpx;
	}

	.line-label2 {
		font-size: 28rpx;
		margin: 4rpx 8rpx 4rpx 0;
		background-color: #8f2c2c;
		color: white;
		border-radius: 6rpx;
		padding: 6rpx 12rpx;
	}

	.demand-text {
		width: 60vw;
		font-size: 26rpx;
		color: #666666;
		margin-top: 8rpx;
		line-height: 1.5;
		display: -webkit-box;
		white-space: nowrap;
		overflow: hidden;
		margin: 0 5rpx;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	/deep/ .uni-stat__select {
		background-color: #F3F3F3;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/deep/ .uni-select__input-text {
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>